@charset "utf-8";

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

body
{
    background-color : rgb(255,255,255);
    border           : 0;
    margin           : 0;
    padding          : 0;
    font-family      : sans-serif;
}

h1
{
    font-family : '2peas_rp_folkstarregular', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Försök Först Applicera Font : [2Peas] Om Den Inte Laddas, Försök Med [Segoe UI], ... : AVSLUTA ALLTID Med : [sans-serif] || [serif] || [...] */
    font-size   : 5rem;   /* Skalbar Text Storlek : Anpassar Sig Dynamiskt Efter Olika Enheter & Upplösningar */
    font-weight : normal; /* MÅSTE Matcha @font-face deklarationens font-weight */
    margin      : 2rem 0; /* Avstånd Utanför Elementet : [2rem]-[Over/Under] : [0]-[Left/Right] */
    text-align  : center; /* Centrera Text Horisontellt Inom Elementets Box : [left] : [right] : [justify] */
    color       : red;
    position    : relative;
    top         : 20vh;
}

@font-face
{
    font-family  : '2peas_rp_folkstarregular';
    src          : url('../assets/fonts/2peas_rp_folkstar-webfont.woff2') format('woff2'), url('../assets/fonts/2peas_rp_folkstar-webfont.woff') format('woff');
    font-weight  : normal; /* Skapa Flera @font-face Deklarationer Vid Behov Av Olika font-weight : h1, p, ... */
    font-style   : normal;
    font-display : swap;   /* Best Practice */
}

#imageTopLeft
{
    width    : 50px;
    height   : 50px;
    position : absolute;
    border   : 0;
    left     : 0;
    top      : 0;
}

#imageTopRight
{
    width    : 50px;
    height   : 50px;
    position : absolute;
    border   : 0;
    top      : 0;
}

#imageCenter
{
    width    : 250px;
    height   : 250px;
    position : absolute;
    border   : 0;
}

#imageBottomLeft
{
    width    : 50px;
    height   : 50px;
    position : absolute;
    border   : 0;
    left     : 0;
}

#imageBottomRight
{
    width    : 50px;
    height   : 50px;
    position : absolute;
    border   : 0;
}

#pageHome
{
    width           : 100%;
    height          : 100%;
    position        : relative;
    border          : 0;
    display         : flex;
    gap             : 1rem;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
}

#pageAbout  /* NY Class #pageAbout KOPIERAT OVAN #pageHome och bytt namn   !!!!!!! XXXOOOOOXXX !!!!!!! */
{
    width           : 100%;
    height          : 100%;
    position        : relative;
    border          : 0;
    display         : flex;
    gap             : 1rem;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
}

#pageContact  /* NY Class #pageContact KOPIERAT OVAN  #pageHome och bytt namn   !!!!!!! XXXOOOOOXXX !!!!!!! */
{
    width           : 100%;
    height          : 100%;
    position        : relative;
    border          : 0;
    display         : flex;
    gap             : 1rem;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
}

.nav-wrapper
{
    position     : absolute;
    top          : 100px;
    left         : 50%;
    transform    : translateX(-50%);
    display      : flex;
    gap          : 1.5rem; /* ändra gap om man vill ha större eller mindre avstånd mellan knapparna */
}

/* NY Class [tidigare : .image-button] är ändrad till .image-button-home          !!!!!!! XXXOOOOOXXX !!!!!!! */
.image-button-home
{
    border     : none;
    background : none;
    padding    : 0;
    cursor     : pointer; /* visar Hand Cursor */
    display    : block;
    width      : 150px;
    height     : 50px;
    position   : relative;
}

/* NY Class .image-button-about KOPIERAT OVAN .imageButtonHome och bytt namn - alla knappar ska ha en egen och inte gemensam [tidigare : .image-button]  då blir det fel storlek   !!!!!!! XXXOOOOOXXX !!!!!!! */
.image-button-about
{
    border     : none;
    background : none;
    padding    : 0;
    cursor     : pointer; /* visar Hand Cursor */
    display    : block;
    width      : 157px;
    height     : 50px;
    position   : relative;
}

/* NY Class .image-button-contact KOPIERAT OVAN .imageButtonHome och bytt namn - alla knappar ska ha en egen och inte gemensam [tidigare : .image-button]  då blir det fel storlek   !!!!!!! XXXOOOOOXXX !!!!!!! */
.image-button-contact
{
    border     : none;
    background : none;
    padding    : 0;
    cursor     : pointer; /* visar Hand Cursor */
    display    : block;
    width      : 210px;
    height     : 50px;
    position   : relative;
}

.image-button img
{
    width          : 100%;
    height         : 100%;
    display        : block;
    pointer-events : none; /* Gör Så Att Hover Registreras På HELA Knappen */
}