/*
    Author: Yui Nguyen
    Lab 01
    Date created: 06-25-2025
    Last update: 06-25-2025
*/

/*
    Default Elements
*/

body {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

h1{
    font-family: "Audiowide", sans-serif;
    font-weight: 750;
    font-style: normal;
    text-align: center;
    color: black;
}

hr{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 1ex;
    background-color: rgba(0, 0, 255, 0.75);
    border: none;
}

table{
    width: 25%;
    border: 1px solid blue;
    padding: 0.5%;
    background: radial-gradient(rgba(31, 215, 232, 1.0) 0%, rgba(2, 29, 78, 0.33) 85%);
}

tr, td{
    border: 1px solid blue;
    padding: 0px 5px 0px 5px;
    text-align: center;
}

ul, li{
    font-size: 1.25rem;
    line-height: 40px;
    color: black;
}

/*
    Panel Elements
*/
.header-container{
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,rgba(2, 29, 78, 1.0) 0%,rgba(31, 215, 232, 1.0) 50%,rgba(2, 29, 78, 1.0) 100%); 
    clip-path: polygon(10.25% 3%, 89.75% 3%,  94.25% 50%,  89.75% 97%,  10.25% 97%,  5.75% 50%);
    align-content: center;
}

.header-border{
    position: absolute;    
    width: 60%;
    height: 10%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background: rgba(0, 0, 255, 0.75);
    clip-path: polygon(10% 0%, 90% 0%,  95% 50%,  90% 100%,  10% 100%,  5% 50%);  
    align-content: center;
}

.main-container{
    position: absolute;
    left: 50%;
    top: 15%;
    width: 65%;
    height: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    background: rgba(255,255, 255, 0); 
    padding: 1em;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
    
.main-child-container{
    margin: 1em;
    background: linear-gradient(30deg,rgba(2, 29, 78, 1.0) 0%,rgba(31, 215, 232, 1.0) 50%,rgba(2, 29, 78, 1.0) 100%); 
    border: 5px solid blue;
    border-radius: 1em;
}

.button-link{
    font-size: 26px;    
    color: white;
    text-shadow: 2px 2px 2px blue;
    text-align: center;
    text-decoration: none;
    margin: 0px 25px 0px 25px;
    padding: 10px;
    background: linear-gradient(90deg,rgba(2, 29, 78, 0.75) 0%,rgba(31, 215, 232, 0.75) 66%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.5s ease,
                font-size 0.5s ease,
                padding 0.5s ease;
}

.button-link:hover{
    background-size: 100% 100%;
    font-size: 32px;
    padding-top: 5px;
    padding-bottom: 15px;
}

.table-header{
    color: white;
    text-shadow: 2px 2px 2px blue;
}

.table-row{
    color: white;
}

/*
    Specific elements
*/
#logo{
    border: none;
    width: 15%;
    height: 100%;
}

#introduction{
    width: 60%;
    height: 90%;
    padding: 0.75% 1% 0.75% 1%;
    text-align: start;
    font-size: large;
    color: black;
    line-height: 30px;
    margin: 0.5em;
    background: linear-gradient(30deg,rgba(2, 29, 78, 1.0) 0%,rgba(31, 215, 232, 1.0) 50%,rgba(2, 29, 78, 1.0) 100%);
    border: none;
}

#disclaimer{
    width: 70%;
    height: 85%;
    text-align: left;
    color: white;
    padding: 0 0 10px 10px;
    line-height: 20px;
    background: none;
    border: none;
}

#flag-background{
    width: 60%;   
    padding: 0 10px;
    background-image: linear-gradient(30deg,rgba(2, 29, 78, 0.75) 0%,rgba(31, 215, 232, 0.75) 50%,rgba(2, 29, 78, 0.75) 100%),
                     url(./img/FederationFlag.jpg);
    background-repeat: no-repeat;
    background-size: contain;    
    overflow-y: auto;
}

#contact-form-container{
    height: 47.5%;
    width: 35%;
    margin: 5px;
    background: linear-gradient(30deg,rgba(2, 29, 78, 1.0) 0%,rgba(31, 215, 232, 1.0) 50%,rgba(2, 29, 78, 1.0) 100%);
    overflow-y: scroll;
}

.image-resize{
    width: 100%;
    height: 100%;
}

.foot-container{
    position: absolute;
    left: 50%;
    bottom: 0%;
    width: 40%;
    height: 10%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0); 
    margin: 1em;
    padding-bottom: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/*
    Decoration Elements
*/
.general-background{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
}

.left-decoration{
    position: absolute;
    width: 15%;
    height: 100%;
    left: 0;
    top: 0;
    /* Create a pattern with transition background: background, vertical lines, horizontal lines*/
    background: radial-gradient(rgba(31, 215, 232, 1.0) 0%, rgba(2, 29, 78, 0.33) 85%),
                linear-gradient(rgba(255, 255, 255, 1.0) 1px, transparent 1px),
                linear-gradient(to right, rgba(255, 255, 255, 1.0) 1px, transparent 1px);
    background-size: cover, 20% 8%, 20% 8%;
}

.right-decoration{
    position: absolute;
    width: 15%;
    height: 100%;
    right: 0;
    top: 0;
    /* Create a pattern with transition background: background, vertical lines, horizontal lines*/
    background: radial-gradient(rgba(31, 215, 232, 1.0) 0%, rgba(2, 29, 78, 0.33) 85%),
                linear-gradient(rgba(255, 255, 255, 1.0) 1px, transparent 1px),
                linear-gradient(to right, rgba(255, 255, 255, 1.0) 1px, transparent 1px);
    background-size: cover, 20% 8%, 20% 8%;
}

.center-decoration{
    position: absolute;
    width: 40%;
    height: fit-content;
    bottom: 27.5%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    text-shadow: 2px 2px 2px blue;
    font-size: 4ex;
}