﻿/*mobile min 360px max 599 px
tablet min 600 px max 1023 px
laptop min 1024 px
desktop min 1824 px*/
/*for negations (you can chain multiple of these classes)*/
@media screen and (max-width: 599px) {
    .display_none_mobile {
        display: none !important;
    }
}

@media screen and (max-width: 1023px) and (min-width: 600px) {
    .display_none_tablet {
        display: none !important;
    }
}

@media screen and (max-width: 1823px) and (min-width: 1024px) {
    .display_none_laptop {
        display: none !important;
    }
}

@media screen and (min-width: 1824px) {
    .display_none_desktop {
        display: none !important;
    }
}
/*for exclusive elements:*/

@media screen and (max-width: 599px) {
    .tablet_only {
        display: none !important;
    }

    .laptop_only {
        display: none !important;
    }

    .desktop_only {
        display: none !important;
    }
}

@media screen and (max-width: 1023px) and (min-width: 600px) {
    .mobile_only {
        display: none !important;
    }

    .laptop_only {
        display: none !important;
    }

    .desktop_only {
        display: none !important;
    }
}

@media screen and (max-width: 1823px) and (min-width: 1024px) {
    .mobile_only {
        display: none !important;
    }

    .tablet_only {
        display: none !important;
    }

    .desktop_only {
        display: none !important;
    }
}

@media screen and (min-width: 1824px) {
    .mobile_only {
        display: none !important;
    }

    .tablet_only {
        display: none !important;
    }

    .laptop_only {
        display: none !important;
    }
}

/*CSS after VillageED design changes started 7/10/2023 */
/*test*/
/*VillageED logo is in Daniel Black*/
@font-face {
    font-family: 'DanielBlack';
    src: url('./fonts/danielbk.ttf') format('embedded-opentype'), /* Internet Explorer */
    url('./fonts/danielbk.ttf') format('woff2'), /* Super Modern Browsers */
    url('./fonts/danielbk.ttf') format('woff'), /* Pretty Modern Browsers */
    url('./fonts/danielbk.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/danielbk.ttf') format('svg'); /* Legacy iOS */
}

/*regular text should be in Raleway*/
/*@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');*/
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    src: url('./fonts/Raleway-VariableFont_wght.ttf') format('embedded-opentype'), /* Internet Explorer */
    url('./fonts/Raleway-VariableFont_wght.ttf') format('woff2'), /* Super Modern Browsers */
    url('./fonts/Raleway-VariableFont_wght.ttf') format('woff'), /* Pretty Modern Browsers */
    url('./fonts/Raleway-VariableFont_wght.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/Raleway-VariableFont_wght.ttf') format('svg'); /* Legacy iOS */
}
/*Italic part of font*/
@font-face {
    font-family: 'Raleway';
    font-style: italic;
    src: url('./fonts/Raleway-Italic-VariableFont_wght.ttf') format('embedded-opentype'), /* Internet Explorer */
    url('./fonts/Raleway-Italic-VariableFont_wght.ttf') format('woff2'), /* Super Modern Browsers */
    url('./fonts/Raleway-Italic-VariableFont_wght.ttf') format('woff'), /* Pretty Modern Browsers */
    url('./fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/Raleway-Italic-VariableFont_wght.ttf') format('svg'); /* Legacy iOS */
}



.white_card {
    border-radius: 0.625rem;
    background: #FFF;
    box-shadow: -2px -4px 12px 3px rgba(161, 161, 161, 0.25), 2px 2px 8px 0px rgba(167, 167, 167, 0.25);
}

.white_circle {
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 13.375rem;
    height: 13.375rem;
}

.margin_center {
    margin-left: auto;
    margin-right: auto;
}

.flex_container {
    flex: 1 1 auto;
    display: flex;
}
/*For js that needs button tags but it should not look like a button*/
.button_reset {
    all: unset;
    outline: revert;
}
