/*  CSS safespot, (C) wind 2025 */

/* --------- FONTS ----------- */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');


/* ----- COLORS ----- */

.colors {
    
    /* general */
    color: #324851DD;           		/* Blue Pine - ul */
    color: #1e1e26BB;               	/* Black Russian - nav area */
    background-color: #e4f5f533;    	/* Light Cyan - a:hover  */
    color: #0087ae;             		/* Cerulean - a:hover, keyword */
    
    /* icon borders */
    border-right: 1px solid #313844AA;  /* Licorice  - border-right of icons*/
    border-left: 1px solid #313844AA;   /* Licorice - Wallet, hard-coded HTML */
    border-left: 1px solid #313844AA;   /* Licorice - border-left of icons */
    border-left: 1px solid #AAA;        /* Dark Grey - div.list_rahmen - Rahmenbedingungen */

    /* sections */
    color: #313844;                 	 /* Licorice - section */
    color: #1E434C;             		 /* Forest - h2, h3 - section headers */
    border-bottom: 1px dashed #CCC;     /* Light Grey - section */
    background-color: #F8F7F2;          /* Alabaster - background for sections A, B, C, D + hero */

    /* footer */
    background-color: #313844;      	 /* Licorice - footer */
    color: #DDD;                    	 /* Gainsboro - footer */	

    /* wrapper */
    border-left: 1px solid #CCC;  		 /* Light Grey - wrapper1*/
    border-right: 1px solid #CCC;  	 /* Light Grey - wrapper 1 */

    /* details area */
    border: 1px solid #32485122;    	 /* Atomic - details area */
    background-color: #E5E0E544;    	 /* Selago - details area */
    color: #324851BB;                   /* Atomic - Read More */

    /* hero */
    color: #3d7878AA;               	 /* Ming - hero h1 */
    color: #1e1e26BB;               	 /* Black Russian - h4 hero*/
    border: 1px solid #99938dAA;        /* Zorba  - hero box */
    border-bottom: 1px solid #969a9f;   /* Grey Chateau - hero section */
    background-color: #D1CDCC66;        /* Mercury - hero_box */ 

    /* about me list */
    border-bottom: 1px solid #00000022; /* Black - about me - invisible outside list */
    border-bottom: 1px solid #ddd;      /* Gainsboro - about me - nested list */ 
    border-left: 3px solid #E16F6944;   /* Terra Cotta - about me, nested list */
    background-color: #f9f9f5;          /* Ivory - about me */
    color: #ADA5AF;                     /* Chatelle - li::before in about me list */
    color: #324851BB;                   /* Atomic - nested list about me */

}

/* ---------------------------------- */
/* --------- GENERAL STUFF ---------- */
/* ---------------------------------- */

html, body {
    font-size: 16px;
    overflow-x: auto; /* Enables horizontal scrolling */
    min-width: 100vw; /* Ensures it respects wider content */
    font-family: "Livvic", sans-serif;
    font-optical-sizing: auto;
    color: #324851;             /* Blue Pine */
}    

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

/* --------- PARAGRAPH  ---------- */
p { 
    font-family: "Livvic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5rem;
    color: #324851;             /* Blue Pine */
}


@media (max-width:600px) {
    p.box01 {
        overflow-wrap: break-word; 
        white-space: normal; 
        hyphens: auto;
    }
}





h2 { 
    margin-bottom: 0.6rem; 
    /* ---------------------- */
    font-family: "Bebas Neue", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8rem;
    color: #1E434C;             /* Forest */
}

h3 { 
    margin-top: 0.8rem;
    margin-bottom: 0.9rem; 
    /* ---------------------- */
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    color: #1E434C;             /* Forest */
}

ul {
    font-family: "Livvic", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #324851DD;           /* Blue Pine */
}

a { 
    text-decoration: underline; 
    color: #324851;             /* Blue Pine */
}

a:hover {
    color: #0087ae;                 /* Cerulean */
    background-color: #e4f5f533;    /* Light Cyan */
}

.nowrap {
    white-space: nowrap;
    line-height: 1.5rem;
}    

.nowrap2 {
    white-space: nowrap;
}

/* ------ WRAPPER ----------- */

@media (max-width: 599px) { 
    .wrapper1 {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
    }    
}

@media (min-width: 600px) { 
    .wrapper1 {
        display: flex;
        flex-direction: column;
        max-width: 50rem;
        min-width: 30rem;
        margin-bottom: 0;
        margin-left: 1rem;
        margin-right: 1rem;
        border-left: 1px solid #CCC;  /* Light Grey */
        border-right: 1px solid #CCC;   /* Light Grey */ 
    }  
}

.wrapper2 {
    display: flex;
    flex-direction: column;
    width: 100%;
}    

.wrapper3 {
    display: flex;
    flex-direction: row;
    align-items: stretch; 
    width: 100%;
}  

@media (max-width: 599px) {
    .wrapper4 {
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 600px) {
    .wrapper4 {
        display: flex;
        flex-direction: row;
    }
}


/* ------- SWITCH ----------- */

/* turn off stuff if view port gets too narrow */

@media (max-width: 599px) {
    .switch {
        display: none;
    }

    .cancel {
        margin: 0;
        padding: 0; 
    }
}


@media (min-width: 600px) {
    p.cancel {
        margin-left: 1.8rem; 
        padding-right: 1rem; 
        padding-left: 1rem; 
        border-left: 1px solid #AAA;  
        border-right: 1px solid #AAA;
    }
}



/* ------- SECTIONS -----------*/

@media (max-width: 419px) { 
    .section {
        display:flex;
        flex-direction: column;
        padding: 1.2rem;
        color: #313844;                 /* Licorice */
    }
}

@media (min-width: 420px) { 
    .section {
        display:flex;
        flex-direction: column;
        padding: 2.5rem;
        color: #313844;                 /* Licorice */
    }
}


/* ---------------------------------- */
/* -------- NAVI, top & bottom ------ */
/* ---------------------------------- */ 

/* NAVIGATION TOP */

@media (max-width: 599px) { 
    .nav {
        position: absolute;
        top: 1.6rem;;
        left: 1.5rem;
        font-family: "Livvic", sans-serif;
        font-family: "Bricolage Grotesque", sans-serif;
        color: #1e1e26BB;                 /* Licorice */
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal; 
        letter-spacing: 0.05rem;
        font-size: 0.8rem;
    }
    
    .nav a {
        text-decoration: none;
        font-weight: 500;
    }
    
    .nav a:hover {
        text-decoration: none;
        font-weight: 500;

    }

}

	
@media (min-width: 600px) { 

    .nav {
        position: absolute;
        top: 20px;
        right: 40px;
        font-family: "Livvic", sans-serif;
        font-family: "Bricolage Grotesque", sans-serif;
        color: #1e1e26BB;                 /* Licorice */
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal; 
        letter-spacing: 0.1rem;
        font-size: 1rem;
    }
    
    .nav a {
        margin: 0 0.6rem;
        text-decoration: none;
        font-weight: 500;
    }
    
    .nav a:hover {
        text-decoration: none;
        font-weight: 500;
    }
}

/* NAVIGATION BOTTOM */


.navbottom {
    padding: 0;
    margin: 0;
    font-family: "Livvic", sans-serif;
    font-family: "Bricolage Grotesque", sans-serif;
    color: #1e1e26BB;                 /* Licorice */
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal; 
}

.navbottom a {
    margin: 0 0.6rem;
    text-decoration: none;
}

.navbottom a:hover {
    text-decoration: none;
    color: #324851BB; 
    color: black;
    background-color: #fffcc6;

}

@media (max-width: 360px) { 
    .navbottom {
        letter-spacing: 0;
        font-size: 0.8rem;
        text-align: center;
    }    
}

@media (min-width: 361px) { 
    .navbottom {
        letter-spacing: 0.05rem;
        font-size: 0.8rem;
        text-align: center;
    }    
}

@media (min-width: 600px) { 
    .navbottom {
        letter-spacing: 0.1rem;
        text-align: right;
        font-size: 1rem;
    }    
}


/* ---------------------------------- */
/* --------- KEYWORDS (COLORS) ------ */
/* ---------------------------------- */ 
.keyword {
    font-family: "Livvic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal; 
    line-height: 1.5rem;
    color: #0087ae;                 /* Cerulean */
    background-color: #e4f5f5;      /* Light Cyan */
}  

@media (max-width: 419px) { 
    .keyword {
        letter-spacing: 0.05;
    }  
}

@media (min-width: 420px) { 
    .keyword {
        letter-spacing: 0.1rem;
    }  
}

/* ---------------------------------- */
/* --------- READ MORE FUNCTION ----- */
/* ---------------------------------- */ 

@media (max-width: 419px) {
    
    details {
        background-color: #E5E0E544;    /* Selago */
        padding: 0.5rem 0.8rem;
        border: 1px solid #32485122;    /* Atomic */
        border-radius: 0.4rem;
        margin-bottom: 1rem;
    }
}

@media (min-width: 420px) {

    details {
        background-color: #E5E0E544;    /* Selago */
        padding: 1.1rem 2rem;
        border: 1px solid #32485122;    /* Atomic */
        border-radius: 0.4rem;
        margin-bottom: 1rem;
    }

    details.about {
        /* padding: 0.4rem 1.8rem; */
        background-color: #F8F7F2;      /* Alabaster */
        background-color: yellow;      /* Alabaster */
        border: 0;
        margin-bottom: 0;
    }
    
    summary.about {
        padding-bottom: 0.3rem;
        font-family: "Livvic", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 0.9rem;
        line-height: 1.5rem;
        color: #324851AA;             /* Blue Pine */
    }
}

.read_more {
    cursor: pointer;
    font-family: "Livvic", sans-serif;
    font-variant: small-caps;
    text-decoration: none;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.0rem;
    line-height: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    color: #324851BB;             /* Blue Pine */
}
   
.read_more:hover {
    text-decoration: underline;
    color: #324851FF; 
}

/* necessary to remove the arrow!! */
.read_more::-webkit-details-marker {
    display: none;
    color: #ffffff00;           /* none */
    visibility: none;
    font-size: 0;
}

.read_more::marker {
    display: none;
    color: #ffffff00;           /* none */
    visibility: none;
    font-size: 0;
}






/* --------- BOXES ---------- */

.box01, .box02, .box03, .box04 {
    margin-bottom: 0.6rem;
    padding: 0rem;
    text-align: justify;
}

.box02 {
    max-width: 29rem;
}    

.box03 {
    max-width: 28rem;
} 

.box04 {
    max-width: 30rem;
    text-align: right;
    padding-right: 2rem;
} 

.box05 {
    width: 11.5rem;
}

/* ------------------------------ */
/* --------- HERO BOX ----------- */
/* ------------------------------ */
/* breakpoint desktop: 570px */


@media (max-width: 600px) { 
    .hero {
        display: flex;
        height: 565px;
        width: 512px; 
        min-width: 100vw;
        background-image: url('pix/hero_800.jpg');
        background-position: left top;
        background-repeat: no-repeat; 
        background-size: cover; 
        background-size: 800px 565px; 
        background-attachment: scroll;
        position: relative;
        overflow: hidden;
        justify-content: center;
        align-items: center; 
    }

    .hero_box  {      
        position: absolute;
        top: 10%;
        left: 2rem;
        width: 16rem;
        text-align: center;
        padding: 20px 40px;
        padding: 10px 0px;
        margin: 0;
        background: #D1CDCC66;          
        border: 1px solid #99938dAA;  
        border-radius: 10px; 
    }

    .hero_box h1 {     
        font-family: "Philosopher", sans-serif;
        font-weight: 900;
        font-size: 2.8rem;
        letter-spacing: 0.20rem; 
        color: #3d7878AA;
    }
    
    .hero_box h4 {            
        font-weight: 200;
        letter-spacing: 0.17rem;
        font-family: "Bricolage Grotesque", sans-serif;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        font-size: 0.8rem;
        letter-spacing: 0.1rem;
        color: #1e1e26BB;
    }
} 


@media (min-width: 601px) { 

    .hero {
        display: flex;
        flex-direction: column;
        justify-content: top;
        align-items: center; 
        text-align: center;
        position: relative;
        width: 100%;
        height: 100vh;
        background: url('pix/hero_1920.jpg') no-repeat left center/cover;
        color: #333;                        /* Night Rider */
        border-bottom: 1px solid #969a9f;   /* Grey Chateau */
        gap: 4rem; 
    }
    
    .hero_box  {      
        margin-top: 10rem;      
        background: #D1CDCC66;          
        border: 1px solid #99938dAA;  
        padding: 20px 40px;
        border-radius: 10px; 
    }
    
    
    .hero_box h1 {     
        font-family: "Philosopher", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 4.8rem;
        letter-spacing: 0.70rem;   
        color: #3d7878AA;
        margin-bottom: 0.1em; 
    }
    
    .hero_box h4 {            
        font-family: "Bricolage Grotesque", sans-serif;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        font-size: 1.0rem;
        letter-spacing: 0.4rem;
        color: #1e1e26BB;              
        
    }
} 

@media (min-width: 1921px) { 
    .hero {
        background: url('pix/hero_3840.jpg') no-repeat left center/cover;
    }
} 

/* -------------------------------- */
/* --------- OTHER SECTIONS ------- */
/* -------------------------------- */

/* ------- SYSTEMISCHE THERAPIE ----- */
.A {
    background-color: #F8F7F2;          /* Alabaster */
    border-bottom: 1px dashed #CCC;     /* Light Grey */
    padding-top: 3rem;

    .gap {
        margin-bottom: 0.7rem;
    }
}

@media (max-width: 599px) { 
    .iconP {
        display: none;
        align-items: center;
        margin-top: 0.4rem;
        margin-bottom: 0.9rem;      /* this margin makes the vertical border shorter, it looks nicer */
        opacity: 60%;
    }
}

@media (min-width: 600px) { 
    .iconP {
        display: flex;
        align-items: center;
        margin-top: 0.4rem;
        margin-bottom: 0.9rem;      /* this margin makes the vertical border shorter, it looks nicer */
        opacity: 60%;
    }
}

.border_left {
    border-left: 1px solid #313844AA;       /* Licorice */
    padding: 0;
    margin-right: 0;
    margin-left: 1.2rem; 
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}   

.border_right {
    border-right: 1px solid #313844AA;       /* Licorice */
    padding: 0;
    margin-left: 0;
    margin-right: 1.2rem; 
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}   

img.iconA {
    border: 0px dotted purple;
}


/* ------- ANGEBOT -------- */

.B {
    background-color: #F8F7F2;          /* Alabaster */
    border-bottom: 1px dashed #CCC;     /* Light Grey */
}

/* ------ ICONS B ------- */

@media (max-width: 599px) {
    .icon {
        display: none;
    }    
}  

@media (min-width: 600px) { 
    .icon {
        display: flex;
        align-items: center;
        padding: 0.1rem;
        opacity: 60%;
    }    
}

/* -------- RAHMENLISTE ------- */


div.list_rahmen {
    justify-content: end;
    text-align: left;
    padding-left: 2rem;
    border-left: 0px solid #AAA;        /* Dark Grey */
    width: 100%;
} 

ul.rahmen {
    margin-top: 0;
    list-style: none;
    list-style-position: outside;
    li {
        padding-top: 0.5rem;
    }

    li.header {
        padding-bottom:0;
        font-weight: 500;
        white-space: nowrap;
    }

    li.off {
        padding-bottom: 0.5rem;
        padding-top:0;
        margin-left: 1.7em; 
        text-indent: -0.2em;
    }

    
    li.off2 {
        padding-top:0;
        margin-left: 1.7em; 
        text-indent: -0.2em;
    }

    li:before {
        position: relative;
        content: "☼";
        font-size: 0.7rem;
        bottom: 0.1rem;
        margin-right: 0.4rem;
    }

    li.off:before, li.off2:before {
        position: relative;
        content: " ";
        font-size: 0.7rem;
        bottom: 0.1rem;
        margin-right: 0.2rem;
        
    }
    
    .zielgruppe {
        padding-left: 0.3rem;
        font-size: 0.8rem;
        white-space: nowrap;
    } 

    .EUR {
        margin-top:-2px;
        font-size: 0.9rem;
        white-space: nowrap;
    } 

    .dots {
        font-size: 1.2rem; 
        letter-spacing: 0.1rem;
        padding: 0 0.5rem;
    } 
}    


/* -------- PREISLISTE --------- */

@media (max-width: 599px) {

 
}

@media (min-width: 600px) {


}    

/* ------- Details ----- */


.C {
    background-color: #F8F7F2;          /* Alabaster */
    border-bottom: 1px dashed #CCC;     /* Light Grey */
}

/* ------- ÜBER MICH ----- */
.D {  
    display: flex;
    background-color: #F8F7F2;          /* Alabaster */
    border-bottom: 1px dashed #CCC;     /* Light Grey */
    padding-bottom: 1rem;
}

.AB_me {
    border: 1px dashed grey; 
    border-radius: 0.3rem; 
    margin-left: 1rem; 
    padding: 0.5rem;
    padding-bottom: 0.3rem;
    align-items: center;
    height: 100%; 
    
    overflow: hidden;
    white-space: nowrap;
}

.AB_me:hover {
    border: 1px dashed grey; 
    background-color: #f7fe8844;

}


img.iconAB1, img.iconAB2, img.iconAB3 {
    width: 50px;
}

img.iconAB1 {
    padding: 0;
    margin: 0;
}

img.iconAB2 {
    margin-right: 1rem;
    margin-left: 0.6rem;
}

img.iconAB3 {
    padding: 0;
    margin-right: 0.2rem;
}



/* ------- KONTAKT ----- */

.E {

    background-color: #F8F7F2;             /*  Alabaster */
}





.wrapper_row {
    display: flex;
    flex-direction: row;
}  

.wrapper_col {
    display: flex;
    flex-direction: column;
} 

.align_center {
    align-items: center;
}

.justify_center {
    justify-content: center;
}




/** icons that lead to photos!! **/
/* contact-list */

img.icon_contact {
    width: 60px;
    height: 60px;
}

.AB_contact {
    border: 1px dashed grey; 
    border-radius: 0.3rem; 
    margin: 0;
    margin-left: 1rem; 
    padding: 0.5rem;
    align-items: center;
    height: 100%; 
    
    overflow: hidden;
    white-space: nowrap;
}

.AB_contact:hover {
    border: 1px dashed grey; 
    background-color: #f7fe8844;

}


@media (max-width:605px) {

    .picture-links { 
        margin: 0;
        margin-top: 0.8rem;      /* do not delete! it's for small view-port! */
        align-items: center; 
        height: 100%; 
        white-space: nowrap; 
    }

    .switch_margin_top {
        margin-top: 0.6rem;
    }

}

@media (min-width:606px) {

    .picture-links { 
        margin: 0;
        padding: 0;
        align-items: center; 
        height: 100%; 
        white-space: nowrap; 
    }
}


/* Adresse mit Link zu google maps */
.address {
    border: 1px dashed #F8F7F2; 
    border-radius: 0.3rem; 
    padding: 0.2rem;
    padding-bottom: 0.4rem;
    text-decoration: none;
    width: auto;
}    

.address_back { 
    padding: 0.2rem;
    padding-bottom: 0.4rem;
    padding-left: 0;
    margin-left: 0;
    text-decoration: none;
    width: auto;
}   

.address:hover {
    background-color: #f7fe8844;
    border: 1px dashed grey; 
    border-radius: 0.3rem; 
    padding: 0.2rem;
    padding-bottom: 0.4rem;
    width: auto;
    color: #324851;
    color: black;
}


.contact, contact:hover {
    border-radius: 0.3rem; 
    padding-top: 0.2rem;
    padding-left: 0.4rem;
    padding-bottom: 0.4em;

}

.contact {
    border: 1px dashed #F8F7F2; 
}

.contact:hover {
    background-color: #f7fe8844;
    border: 1px dashed grey; 
    color: black;
}

.contact a {
    text-decoration: underline; 
}

.contact a:hover {
    color: black; 
}

/* contact without hovering .. to match the margins of links above */
.contactB {
    border: 1px dashed #f7fe8844; 
    border-radius: 0.3rem; 
    padding: 0.2rem 0.4rem;
    padding-bottom: 0.3em;
}


.mini-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border: 0px dotted purple;
}



.span2 { 
    grid-column: span 2;
}

.span3 { 
    grid-column: span 3;
}

.break {
    overflow: visible;
    overflow: hidden; 
    white-space: normal;
    white-space: wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

.entry {
    width: auto;

}


.subentry { 
    font-size: 0.8rem; 
    /* margin-top: 0.2rem;  */
    margin: 0;
    padding: 0;
    line-height: 1.3rem;
    overflow: hidden; 
    white-space: wrap;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}



.border {
    border: 1px solid red;

}    



/* 
@media (max-width: 599px) { 
    .wrapper1 {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
    }    
}

@media (min-width: 600px) { 
    .wrapper1 {
        display: flex;
        flex-direction: column;
        max-width: 50rem;
        min-width: 30rem;
        margin-bottom: 0;
        margin-left: 1rem;
        margin-right: 1rem;
        border-left: 1px solid #CCC;  
        border-right: 1px solid #CCC;   
    }  
}

.wrapper2 {
    display: flex;
    flex-direction: column;
    width: 100%;
}    

.wrapper3 {
    display: flex;
    flex-direction: row;
    align-items: stretch; 
    width: 100%;
}  

@media (max-width: 599px) {
    .wrapper4 {
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 600px) {
    .wrapper4 {
        display: flex;
        flex-direction: row;
    }
}


*/


/* -------- FOOTER ------------- */

.footer {
    display:flex;
    flex-direction: row;
    background-color: #313844;      /* Licorice */
    color: #DDD;                    /* Gainsboro */
    text-align: right;   
    justify-content: space-between;
    align-items: center;     
    font-size: 0.9rem; 
    
    a { 
        text-decoration: underline; 
        color: #DDD; 
        padding: 0 5px;
        text-decoration: none;            /* Blue Pine */
    }
    
    a:hover {
        color: #92fffc;
        color: #0087ae;
        color: #6ecfeb;
        background-color: #313844;
    }

    p.worldsend {
        width:100%;
        height: 100%;
        color: #DDD; 
    }

    .badge_right {
        margin-right: 1.4rem;
    }

    .badge_left {
        margin-left: 1rem;
    }
    
}