* {
    box-sizing: border-box;
}

:root {
    --rocm-blue: #293586;
    --rocm-red: #650c16;
    --rocm-orange: #b27709;
    --rocm-yellow: #f09904;
    --color-red: #ac1424;
    --light-blue-background: #b9dcff;
    --color-white: #FFF;
    --color-dark-grey: #FFFFFF26;
    --color-trash-can: #373d87;
}

/* Define the font-family for the website */
@font-face {
    font-family: BoldMondriaan;
    src: url(/fonts/FilsonPro-Bold.woff2);
}

@font-face {
    font-family: outlinedBold;
    src: url(/fonts/11S0BLTO.TTF);
}

.bg-orange {
    background-color: var(--rocm-yellow);
}

.download-file {
    color: blueviolet;
    text-decoration: underline;
}

.download-file:hover {
    color: red;
}

/*nav bar*/
.item-link {
    padding: 8px;
}

.item-link:hover {
    background: var(--color-dark-grey);
}

/* logo-img nav in base twig */
.logo-img {
    max-height: 232px; /* Set the max height to 300px */
    object-fit: cover; /* Scale the image to cover the page */
}

/*trashcan*/
.trash-can.tiny {
    transform: scale(1.7);
    transition: 2s;
}

.trash-can {
    box-sizing: border-box;
    width: 17px;
    height: 19px;
    position: relative;
    cursor: pointer;
}

.top {
    height: 3px;
    width: 100%;
    position: relative;
    top: -1px;

    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.top .handle {
    width: 11px;
    height: 6px;
    margin: 0 auto;
    position: relative;
    left: 0px;
    border-radius: 50% 50%;
    border: 2px solid var(--color-trash-can);
}

.top .handle:after {
    content: "";
    display: block;
    width: 65%;
    height: 50%;
    position: relative;
    top: 25%;
    left: 17.5%;
    border-radius: 50% 50%;
    background: var(--color-white);
}

.top .base {
    height: 2px;
    position: relative;
    bottom: 2px;
    background: var(--color-trash-can);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.body {
    width: 13px;
    height: 16px;
    position: relative;
    margin: 0 auto;
    border: 2px solid var(--color-trash-can);
    background: var(--color-white);
}

.body .line {
    background: var(--color-trash-can);
    position: absolute;
    height: 10px;
    width: 1px;
    left: 1px;
    top: 1px;
}

.body .line.second {
    left: 3.5px;
}

.body .line.third {
    left: 7px;
}

.trash-can:hover .top {
    transform: rotate(50deg) skew(0deg) translate(2px, -7px);
    transition: 1.46s;
}

.color-red {
    color: var(--color-red);
}

/*Profiel foto*/
/* Style the profile image */
img.profile_img {
    width: 350px;
    object-fit: scale-down;
}

/*Style for profile image on laptop screen*/
@media only screen and (min-width: 992px) {
    img.profile_img {
        width: 100%;
    }
}

/*
The input#registration_form_agreeTerms.form-check-input class styles the "agree to terms" checkbox.
It positions the element relatively, moves it 45% of the view width to the left, and scales it up by 1.45.
*/
input#registration_form_agreeTerms.form-check-input {
    position: relative;
    left: 45vw;
    transform: scale(1.45);
}

/*
The ul class styles unordered lists.
It removes the default list-style.
*/
ul {
    list-style-type: none;
}

/* Style the horizontal rule */
hr {
    color: #1a191a; /* Dark gray color */
}

/* Style the table cells */
td {
    border: 3px solid black; /* Add a black border */
    background-color: var(--color-white); /* Set the background color to white */
}

/* Style the event description textarea */
textarea#event_form_description.form-control {
    height: 30vh; /* Set the height to 30% of the viewport height */
}

/* Style the table headers */
th {
    background-color: #373d87; /* Dark blue background color */
    color: black; /* Black text color */
}

/* th*/
.enrollTableHeader {
    color: white;
}

/* Style the body */
/*The body class resets the default margins on the body element.*/
body {
    background: linear-gradient(to right, #ac1424 50%, #2d3584 50%); /* Add a gradient background */
    background-repeat: no-repeat; /* Don't repeat the gradient */
    background-attachment: fixed; /* Fix the background in place */
    background-size: cover; /* Scale the background to cover the entire element */
    color: #1a191a; /* Dark gray text color */
    font-family: BoldMondriaan; /* Use the BoldMondriaan font family */
    margin: 0;
}

/* Style the labels */
label {
    text-decoration: underline; /* Underline the text */
}

form {
    display: inline-block;
}

.buttondiv1:hover {
    background-color: var(--rocm-blue);
}

.buttondiv2:hover {
    background-color: var(--rocm-red);
}

.buttondiv3:hover {
    background-color: var(--rocm-orange);
}

/* Style the top image in the cards inside grid */
#grid .rocm-card-img-top {
    border-radius: inherit; /* Inherit the border radius from the parent element */
    margin-top: -20px; /* Move the image up by 20px */
    object-fit: scale-down; /* Scale the image down if it is larger than the container */
    max-height: 200px; /* Set the maximum height to 200px */
    max-width: 200px; /* Set the maximum width to 200px */
}


/* Style the grid container (visual wrapper only, Bootstrap handles layout) */
#grid {
    background-color: #f09904; /* Add a background color */
    width: 80vw; /* Set the width to 80% of the viewport width */
    margin-left: 9vw; /* Add a left margin of 9% of the viewport width */
    margin-right: 9vw; /* Add a right margin of 9% of the viewport width */
    border: 3vw solid #f09904; /* Add a border with a width of 3% of the viewport width */
}


/* Style the cards inside the grid */
#grid .rocm-card {
    font-size: 30px; /* Set the font size to 30px */
    color: #ffffff; /* Make the text white */
    background: #b9dcff; /* Light blue background color */
    text-align: center; /* Center the text */
    box-shadow: 2px 2px 2px #1a191a; /* Add a shadow to the element */
    border-radius: 0px; /* Inherit the border radius from the parent element */
    overflow: hidden; /* Ensure inner content (image) stays inside card */
}

/* Change the card style on hover */
#grid .rocm-card:hover {
    transform-origin: center; /* Transform the element around its center */
    transform: scale(1.1); /* Increase the size of the element */
    transition: 1.5s; /* Add a transition effect */
    border-radius: 45px;
}

/* Responsive layout handled by Bootstrap grid */

/* Keep images inside their containers */
.image-border { overflow: hidden; }

.about-text {
    width: 80vw;
    text-align: center;
    margin-left: 9vw; /* Add a left margin of 10% of the viewport width */
    margin-right: 9vw; /* Add a right margin of 10% of the viewport width */
    border: 2vw solid #f09904; /* Add a border with a width of 2% of the viewport width */
    background-color: #f09904
}

.basic-orange-div {
    width: 80vw;
    margin-left: 9vw; /* Add a left margin of 10% of the viewport width */
    margin-right: 9vw; /* Add a right margin of 10% of the viewport width */
    border: 2vw solid #f09904; /* Add a border with a width of 2% of the viewport width */
    background-color: #f09904
}

/* Style the event images */
.event-img {
    width: 80vh; /* Set the width to 80% of the viewport height */
    height: auto; /* Set the height to automatically adjust to the image aspect ratio */
    box-shadow: 8px 12px 8px rgb(82, 80, 80); /* Add a shadow to the element */
}

/* Style the form group */
.rocm-form-group {
    background-color: #f09904; /* Orange background color */
    margin-left: 15vw; /* Add a left margin of 15% of the viewport width */
    margin-right: 15vw; /* Add a right margin of 15% of the viewport width */
    text-align: center; /* Center the text */
}


/* Change the style of the links on hover */
a:hover {
    color: white; /* Make the text white */
    text-decoration: none;
}

/* Style the card body inside grid */
#grid .rocm-card-body {
    block-size: max-content; /* Set the block size to the maximum content size */
}

/* Style the headings */
h1 {
    color: #1a191a; /* Dark gray color */
    font-size: xx-large; /* Large font size */
}

h3 {
    font-size: large; /* Large font size */
    color: #1a191a; /* Dark gray color */
}

/* Style the headings */
h5 {
    color: #8c8c91; /* Light gray color */
}


/* Style the links */
a {
    color: white; /* Make the text white */
    text-decoration: none
}

/* Style the image border */
.image-border {
    height: 200px; /* Set the height to 200px */
    background: #b9dcff; /* Light blue background color */
}

/* Style the paragraphs */
p {
    font-size: large; /* Large font size */
    color: #1a191a; /* Dark gray color */
}

/* Style the form group for viewports with a width up to 800px */
@media (max-width: 800px) {
    .rocm-form-group {
        background-color: #f09904; /* Orange background color */
        margin-left: 0vw; /* Remove the left margin */
        margin-right: 0vw; /* Remove the right margin */
        text-align: center; /* Center the text */
        margin-bottom: 0vw; /* Remove the bottom margin */
    }

    .buttondiv1, .buttondiv2, .buttondiv3, .pastevents-btn, .inlogbutton {
        margin: 10%; /* Add a top and bottom margin of 10% */
    }
}

.buttondiv1 {
    background-color: #2d3584;
    color: white;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 10%;
}

.buttondiv2 {
    background-color: #ac1424;
    color: white;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 10%;
}

.buttondiv3 {
    background-color: #f09904;
    color: white;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 10%;
}

.pastevents-btn {
    transform: scale(1.3);
    background-color: #2d3584;
    border-radius: 10%;
}

.inlogbutton {
    transform: scale(1.3);
    background-color: #2d3584;
    border-radius: 10%;
}

.inlogbutton:hover {
    background-color: #1d2252;
}

.buttondiv:hover {
    background-color: darkblue;
}

.outlineBold {
    font-size: xxx-large;
}

.btn-custom {
    background-color: #293586; /* Custom button color */
    color: #fff; /* Button text color */
}

.rocm-text-right {
    text-align: right;
}

.rocm-text-left {
    text-align: left;
}

.card:hover .hover-me, .hover-me:hover {
    text-decoration: underline;
}

.rocm-btn-sm {
    font-size: 12px;
}

.card-custom {
    background-color: skyblue;
}