@charset "utf-8";

@import "reset.css";
@import "loader.css";
@import "navbar.css";
@import "footer.css";

@import "content.css";

:root {
    --main-color: rgb(26,49,93);
    --second-color: rgb(36,65,121);
    /* --second-color-lighter: rgb(135,200,237); */
    --light-color: rgb(164,210,236);
    --second-color-lighter: rgb(236, 219, 164);
    --dark-color: rgb(14, 25, 55);
}

* {
    transition: .1s;
}

body {
    
    margin: 0px;
    padding: 0px;

    height: 100vh;
    width: 100vw;
    background-color: var(--second-color);

    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

main {
    margin: 0px;
    padding: 0px;
    height: 100vh;
    width: 100vw;
    background-color: var(--second-color);
}

.portalButtons {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 0px;
    text-decoration: none;
}
.portalButton>h2 {
    align-items: center;
    justify-content: center;
}
.portalButton {
    color: var(--light-color);
}
.portalButton:hover {
    color: var(--second-color-lighter)
}

main>div {    
    height: 100%;
    width: 100%;
    color: var(--light-color);
}

h1,h2 {
    padding: 0 20%;
}

h1 {
    /* font-size: 110pt; */
    color: #ffffff;
    font-size: 5vw;
}
h2 {
    font-size: 5vw;
}
h3 {
    font-size: 30pt;
    text-decoration: underline white;
}
h4 {
    font-size: 20pt;
}
p {
    font-family: 'Courier New', Courier, monospace;
}

table {
    margin: 0 auto;
}
.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.italic {
    font-style: italic;
}

.portalButton:nth-child(4n+1),.portalButton:nth-child(4n+4) {
    background-color: var(--main-color);
}
.portalButton:nth-child(4n+2),.portalButton:nth-child(4n+3) {
    background-color: var(--second-color);
}
.portalButton:nth-child(2n) {
    text-align: right;
}
.portalButton:nth-child(2n+1) {
    text-align: left;
}

.cross {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, 30%);
}
.corner {
    height: 10em;
    color:var(--second-color-lighter);
}
.upperright {
    position: absolute;
    top: 2em;
    right: 2em;
    transform: rotate(180deg);
}
.bottomleft {
    position: absolute;
    bottom:2em;
    left: 2em;
}
#CP {
    font-size: 6.5vw;
    color:white;
}

.link {
    text-decoration: underline;
}

@media screen and (max-width: 749px) {
    .corner {
        visibility: hidden;
    }
}