/* Template formatting */

/* Variable static colors */
:root {
    --sidebar_bg-color: rgb(60,60,60);
    --sidebar_hover-color: #f1f1f1;
    --sidebar_link-color: #9f9f9f;
    --header_bg-color: #184958;
    --revtech_green: rgb(2,255,0);
    --card_bg_color: rgb(200,200,200);
    --contact_color: rgb(150,150,150);
    --navbar_bg-color: rgb(33, 34, 39);
    --navbar_link-color: #f2f2f2;
    --navbar_linkhover-color: rgb(162, 168, 187);
}

/* main body container */
.entity_container {
    width:100%;
    height:100%;
    overflow:hidden;
}

/* Top header formatting */
.header {
    padding: 30px;
    text-align: center;
    background-image: url("assets/revtech_logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    font-size: 30px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-bottom: 80px;
    position: relative;
    width: 100%;
}
/* parallax scrolling of george washington header img */
.parallax {
    background-image: url("assets/revtech_logo.png");
    min-height: 500px;
    width:100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.caption {
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
}
.caption span.slogan {
    background-color: var(--revtech_green);
    color: black;
    padding: 18px;
    font-size: 25px;
    font-family:'Courier New', Courier, monospace;
    letter-spacing: 10px;
}

/* Nav Bar */
.topnav {
    overflow: hidden;
    position: relative;
    width: 100%;
    right: 0px;
    left: 0px;
    background-color: var(--navbar_bg-color);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.topnav a {
    float: left;
    display: block;
    color: var(--navbar_link-color);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/* Make the links of the navbar change color when hovering on them */
.topnav a:hover {
    background-color: var(--navbar_linkhover-color);
    color: var(--navbar_bg-color);
}
/* the active class highlights the current tab (link) in blue */
.topnav a.active {
    background-color: var(--revtech_green);
    color: rgb(50,50,50);
}

/* main page content */
.main {
    padding: 0px 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--sidebar_bg-color);
}
body {
    margin:0px;
}
.paragraph {
    padding:30px 30px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size:14pt;
}


/* main body content formatting */
.main_header {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20pt;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: var(--sidebar_bg-color);

    /* background box */
    background-color: var(--card_bg_color);
    padding: 20px;
    padding-left:170px;
    min-height:600px;
}
.h1_header {
    font-size: 32px;
    margin-top: 11px;
    margin-bottom: 11px;
    font-weight: bold;
    line-height: 38px;
    padding-top:30px;
    padding-bottom:30px;
    font-family:'Courier New', Courier, monospace;
}
img {
    height: 50px;
    width: 50px;
    padding-right: 10px;
}
.contact {
    font-family:'Courier New', Courier, monospace;
    justify-content: center;
    display: flex;
}
.contact:hover {
    color: var(--revtech_green);
}



/* misc div classes */
.last_updated {
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: right;
    margin-right: 10px;
}
.card {
    height:auto;
    background-color: var(--card_bg_color);
    padding: 50px;
    min-height:800px;
}
.slide_text {
    transition: transform 0.3s ease-in-out, font-style 0.3s ease-in-out;
}
.slide_text:hover {
    transform: translateX(20px);
    font-style: italic;
}

/* slice at bottom of page */
.sliced_bg {
    width: 100%;
    height: 100vh;
    display: flex;
    background-image: url("assets/code_stock_img.jpeg");
    background-size:cover;
    border-radius:10px;
}
.sliced_card {
    width: 50%;
    background-color:var(--sidebar_bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:10px;
}
.sliced_content {
    color:whitesmoke;
}

/* buttons */
.standard_button {
    background-color: white;
    border: none;
    color: black;
    padding: 10px 16px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    border-radius:10px;
    transition-duration: 0.4s;
}
.standard_button:hover {
    background-color: transparent;
    color: black;
    cursor:pointer;
}


/* Modal formatting */
.modal {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
    animation: fadeIn 0.3s ease forwards;
}
.modal-content {
    margin: auto;
    background-color: var(--card_bg_color);
    padding: 20px;
    border: 2px solid var(--sidebar_bg-color);
    width: 100%;
    position: absolute;
    max-width: fit-content;
    animation: slideIn 0.3s ease forwards;
}
.close {
    color: black;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* modal animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from { transform: translate(-50%, -70%); }
    to { transform: translate(0%, 0%); }
}