@font-face {
    font-family: 'FugazOne'; /* Name your font family */
    src: url('FugazOne-Regular.ttf'); /* Locate the .ttf file within your directory*/
  }


.highlighter {
    width: 183px;
    height: 115px;
    position: absolute;
    border-radius: 9px;
    margin-top: 115px;
    transition: border 0.1s linear;
}

.halfHighlighter {
    width: 183px;
    height: 68px;
    position: absolute;
    border-top-right-radius:9px;
    border-top-left-radius:9px;
    margin-top: 244px;
    transition: border 0.1s linear;
}

.halfHighlighter:hover  {
    border-left: 2px solid #96DAE8;
    border-right: 2px solid #96DAE8;
    border-top: 2px solid #96DAE8;
    cursor: pointer;
}

.highlighter:hover {
    border: 2px solid #96DAE8;
    cursor: pointer;
}

.selected {
    border: 2px solid #96DAE8;
}

#window {
    background-position:center;
    background-size:cover;
    width: 800px;
    border:1px solid #96DAE8;
    height: 313px;
    margin-top: 68px;
    border-top-right-radius:6px;
    border-top-left-radius:6px;
    box-shadow: 0px 0px 50px 1px #48abe0;
}

#mainarea {
    background-position:center;
    background-size:cover;
    height: 600px;
    display: flex;
    justify-content: center;
}

#downloadBtns {
    background-color: white;
    width: 100%;
    position: absolute;
    top: 600px;
    box-shadow: 0px -1px 30px rgba(0, 0, 0, 1);
    display:flex;
    justify-content:center;
}

#downloadBtns button {
    padding: 15px;
    padding-left: 25px;
    padding-right: 25px;
    background-color: #48abe0;
    border: 1px solid #48abe0;
    border-radius: 6px;
    font-size: 17px;
    margin: 20px;
    color:white;
    position: relative;
    cursor:pointer;
}

#downloadBtns h2 {
    color:#48abe0;
    margin-top: 30px;
    font-weight:normal;
    font-family:Inter,sans-serif;
    font-weight: 600;
}

#icons {
    margin-left: 10px;
    border-left: 1px solid white;
    padding-left: 14px;
}

.container {
    display:flex;
    width: 800px;
    margin-top: 100px;
    margin-bottom: 50px;
    font-family:arial;
}

.container img {
    width: 333px;
}

.container div {
    color:white;
    background-color:#48abe0;
    padding: 40px;
    width:800px;
}

.containerTitle {
    font-size: 22px;
    font-weight: 600;
    color:white;
    margin-bottom: 0px;
    font-family: Inter, sans-serif;
}

.container div i {
    font-size:23px;
}

.invisible {
    position: absolute;
    cursor:pointer;
}

p {
    font-family: Inter, sans-serif;
}

h1 {
    font-family: Inter, sans-serif;
}

#footer {
    font-size: small;
    padding-top:60px;
    font-family: Inter, sans-serif;
    display:flex;
    justify-content:center;
    text-align:center;
    margin-top:50px;
    height:200px;
    background-color:#F2F2F2;
}

#hiddenImages {
    top:1px;
    position:absolute;
    z-index:-2;
    opacity:0;
}

#hiddenImages img {
    width:100px;
}

#logoContainer {
    margin-top:146px;
    display:flex;
    justify-content:center;
}

#logoContainer p {
    margin-left: 14px;
    font-size: 25px;
    font-weight: 800;
    margin-top: 19px;
}

#logoContainer img {
    width: 70px;
    height: 69px;
}

@media (max-width: 780px) {
    #window {
        height:198px;
        margin-top:109px;
        width:500px;
    }
    #download {
        width:252px;
    }
    #downloadBtns h2 {
        margin-left:15px;
        font-size:22px;
        margin-top:16px;
    }
    .container {
        width:200px;
        justify-content: center;
        margin-top:60px;
    }
    .container div {
        width:236px;
        padding:28px;
    }
    .description {
        width:236px !important;
        font-size:11px;
    }
    .containerTitle {
        font-size:17px;
    }
    .container img {
        height:173px;
    }
    #icons {
        display:none;
    }
    #logoContainer {
        margin-top:216px;
    }
    .highlighter {
        display:none;
    }
    .halfHighlighter {
        display:none;
    }
    .invisible {
        display:none;
    }
    .selected {
        border:unset;
    }
}