@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');

* {
    box-sizing: border-box;
    margin: 0 auto;
}

body {
    background:#5c36a9;
    background-image:url("../images/background.jpg");
    background-attachment: fixed;
    background-size:cover;
    background-blend-mode:saturation;
}

/* Works on Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #FFDE59 #8B51FE00;
  }
  
  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 12px;
  }
  
  *::-webkit-scrollbar-track {
    background: #8B51FE00;
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: #FFDE59;
    border-radius: 20px;
    border: 0px;
  }

button {
    cursor: pointer;
    background:#FFDE59;
    border:0;    
    border-radius:20px;
    min-height:75px;
    min-width:100px;
    color:#8C2DAD;
    font-weight:500;
    font-family:"Paytone One";
    font-size:25px;
    padding:5px 35px;
    margin:25px;
    text-shadow: 0 2px 1px black;
    transition: 0.75s outline, 0.5s box-shadow;
}

button:hover {
    box-shadow: 0 0 2px 3px #FFDE59;
    outline: 10px double #FFDE59;    
}

button:active {
    text-shadow: 0 -2px 1px black;
    outline: 7px solid rgb(70, 41, 128);
}

div#frw3i_landing-menu-bar {
    position:relative;
    background: #8B51FE;
    background: #FFDE59;
    width:100%;
    min-height:95px;
    display:flex;
    flex-wrap: nowrap;
    justify-content:flex-start;
    align-items:center;
}

div#frw3i_landing-menu-logo-container {
    position:relative; 
    display:flex; 
    align-items:center; 
    width:100%;
}

div#frw3i_landing-menu-items-container {
    position:relative; 
    display:flex; 
    width:100%;
    min-height:95px;
}

div#frw3i_landing-menu-logo {
    width:75px;
    height:75px;
    margin: 10px;    
}

div#frw3i_landing-menu-logo img {
    cursor: pointer;
    width:100%;
    min-width:75px;
    animation-name: pop-on-screen;
    animation-duration:0.5s;
}

div#frw3i_landing-menu-title {
    cursor: pointer;
    color:#8C2DAD;
    font-weight:400;
    font-size:40px;
    margin-left:10px;
    font-family: "Lobster";
    text-shadow: 0 0 1px black;
    
    width:15em;
    white-space: nowrap;
    overflow: hidden;

    animation: show 1.5s steps(60, end);
}

div#frw3i_landing-menu-title div[decoration] {
    background:#8C2DAD;
    height:15px;
    width:100%; 

    clip-path: polygon(0 0%, 0% 40%, 60% 40%, 60% 35%);
}

div#frw3i_landing-menu-items {
    display: flex;
    justify-content:end;
    align-items:center;
    background:#8B51FE;
    width:300px;;
    height:100%;
    position:absolute;
    right:0;
    padding-right:10px;

    clip-path: polygon(0 0%, 100% 0, 100% 100%, 80px 100%);

}

div#frw3i_landing-menu-items div {
    position:absolute;
    right:0;
    padding-right:10px;
}

div#frw3i_landing-menu-items a {
    text-decoration:none;
    color:white;
}

div#frw3i_landing-menu-items i {
    cursor: pointer;
    font-size: 40px;
    color:white;
    margin:5px;
    transition:transform 0.3s;

    animation: pop-on-screen 1s;
    animation-fill-mode: backwards;
}

div#frw3i_landing-menu-items i:hover {
    transform:translateY(-5px);    
}

section#frw3i_landing-footer {
    min-height:95px;
    width:100%;
    padding:25px 10px;
    background:#2e1b54;
    font-family: "Kanit";
    color:white;
    text-align:center;
    font-weight:300;
}

section#frw3i_landing-footer company {
    font-size:22px;
    font-style:italic;
    font-weight:400;
}

section#frw3i_landing-footer div[decoration] {
    height:1px;
    width:100%;
    max-width:400px;
    background:white;
    margin-top:15px;
    margin-bottom:15px;
}

section#frw3i_landing-footer date {
    font-weight:200;
    font-size:13px;
}